<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px" size="mini">
      <el-form-item label="招聘项目" prop="projectName">
        <el-input v-model="queryParams.projectName" clearable placeholder="请输入" @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="招聘状态" prop="recruitPlanStatus">
        <el-select v-model="queryParams.recruitPlanStatus" clearable placeholder="请选择">
          <el-option v-for="item in recruitPlanStatusOptions" :key="item.value" :label="item.label"
                     :value="parseInt(item.value)"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button v-hasPermi="['cld:recruitPlan:add']" icon="el-icon-plus" plain size="mini" type="primary"
                   @click="handleAdd">新增招聘
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="recruitPlanList" border>
      <el-table-column align="center" label="招聘项目" prop="projectName" width="150px;"/>
      <el-table-column align="center" label="组别" prop="projectGroupId" width="100px;">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.cld_project_groups" :value="scope.row.projectGroupId"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="招聘负责人" prop="recruitLeadingName" width="100px;"/>
      <el-table-column align="center" label="发起时间" prop="createTime" width="160px;">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="招聘开始时间" prop="startTime" width="100px;">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="招聘结束时间" prop="endTime" width="100px;">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="招聘状态" prop="recruitPlanStatus" width="80px;">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.recruitPlanStatus == 0" type="warning">未开始</el-tag>
          <el-tag v-if="scope.row.recruitPlanStatus == 1">进行中</el-tag>
          <el-tag v-if="scope.row.recruitPlanStatus == 2" type="success">已结束</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="计划招聘人数" prop="recruitPlanNumber" width="100px;"/>
      <el-table-column align="center" label="实际招聘人数" prop="actualNumber" width="100px;"/>
      <el-table-column align="center" label="到岗人数" prop="dutyNumber" width="100px;"/>
      <el-table-column align="center" label="到岗率" width="100px;">
        <template slot-scope="scope">
          <span>{{
              (scope.row.actualNumber > 0 ? ((scope.row.dutyNumber / scope.row.actualNumber) * 100).toFixed(0) : 0)
              + "%"
            }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="招聘描述" prop="recruitPlanDesc"/>
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="160px;">
        <template slot-scope="scope">
          <el-button v-if="scope.row.recruitPlanStatus == 0" v-hasPermi="['cld:recruitPlan:edit']" size="mini" type="text"
                     @click="handleUpdate(scope.row)">修改
          </el-button>
          <el-button v-hasPermi="['cld:recruitPlan:query']" size="mini" type="text"
                     @click="handleViewJobStaff(scope.row)">查看到岗人员
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum" :total="total"
                @pagination="getList"/>

    <!-- 添加或修改招聘计划对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body width="700px">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="mini">
        <el-row :gutter="20">
          <el-form-item label="项目小组" prop="groupsId">
            <el-cascader-panel :disabled="form.recruitPlanId" v-model="form.groupsId" :options="projectGroupOptions" @change="handleCascaderChange"></el-cascader-panel>
          </el-form-item>
        </el-row>
        <el-row :gutter="20">
          <!-- <el-col :span="12">
            <el-form-item label="负责人" prop="recruitLeadingName">
              <el-input v-model="form.recruitLeadingName" placeholder="请输入">
                <el-button slot="append" :disabled="!this.form.projectId" @click="handleAddStaff">选择</el-button>
              </el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item label="招聘时间" prop="daterange">
              <el-date-picker :disabled="form.recruitPlanId" v-model="form.daterange" value-format="yyyy-MM-dd" end-placeholder="结束日期" range-separator="至"
                              start-placeholder="开始日期"
                              type="daterange">
              </el-date-picker>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="招聘人数" prop="recruitPlanNumber">
              <el-input :disabled="form.recruitPlanId" v-model="form.recruitPlanNumber" placeholder="请输入">
                <template slot="append">人</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="招聘金额" prop="recruitMoney">
              <el-input v-model="form.recruitMoney">
                <template slot="append">元/人</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="招聘描述" prop="recruitPlanDesc">
              <el-input v-model="form.recruitPlanDesc" :rows="4" placeholder="请输入" type="textarea"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 查看到岗信息 -->
    <el-dialog :close-on-click-modal="false" :visible.sync="jobOpen" append-to-body title="到岗信息" width="60%">
      <el-table :data="form.dutyList" border>
        <el-table-column align="center" label="员工编号" prop="staffId"/>
        <el-table-column align="center" label="员工姓名" prop="staffName"/>
        <el-table-column align="center" label="性别" prop="staffSex"/>
        <el-table-column align="center" label="组别" prop="projectGroupsId">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.cld_project_groups" :value="scope.row.projectGroupsId"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="岗位" prop="projectPostName">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.cld_project_post" :value="scope.row.projectPostName"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="职务" prop="projectDuitsName">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.cld_project_duits" :value="scope.row.projectDuitsName"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="上级领导" prop="recommenStaffName"/>
        <el-table-column align="center" label="入职时间" prop="employmentTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.employmentTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="jobOpen = false">关 闭</el-button>
      </div>
    </el-dialog>
    <!-- 选择人员 -->
    <el-dialog :close-on-click-modal="false" :destroy-on-close="true" :visible.sync="isStaffOpen" append-to-body title="选择人员"
               width="70%">
      <SelectedStaff v-if="isStaffOpen" :isProject="false" :params="{ staffStatuss: '1,2',isAdmin: '1', projectId: this.form.projectId }"
                     @childInput="handleSelectedStaff">
      </SelectedStaff>
    </el-dialog>
  </div>
</template>

<script>
import {addRecruitPlan, getRecruitPlan, listRecruitPlan, updateRecruitPlan} from "@/api/cld/recruitPlan";
import {selectedProjectJob} from '@/api/cld/publicCommon'
import {recruitPlanStatusOptions} from '@/assets/staticDict'
import SelectedStaff from '@/views/cld/staff/selectedStaff';

export default {
  name: "RecruitPlan",
  dicts: ['cld_project_groups','cld_project_post','cld_project_duits'],
  components: {
    SelectedStaff
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 招聘计划表格数据
      recruitPlanList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查看到岗人员
      jobOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectName: null,
        recruitPlanStatus: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        groupsId: [
          {required: true, message: "项目组别不能为空", trigger: "change"}
        ],
        daterange: [
          {required: true, message: "招聘时间不能为空", trigger: "change"}
        ],
        recruitPlanNumber: [
          {required: true, message: '招聘人数不能为空', trigger: 'blur'}
        ],
        recruitPlanDesc: [
          {required: true, message: '招聘描述不能为空', trigger: 'blur'}
        ],
        recruitMoney: [
          {required: true, message: '招聘金额不能为空', trigger: 'blur'}
        ],
        recruitLeadingName: [
          {required: true, message: '招聘负责人不能为空', trigger: 'blur'}
        ],
      },
      // 招聘负责人
      isStaffOpen: false,
      // 项目组信息
      projectGroupOptions: [],
      // 招聘状态
      recruitPlanStatusOptions: recruitPlanStatusOptions
    };
  },
  created() {
    this.getList();
    this.handleGetProjectGroups();
  },
  methods: {
    /** 查询招聘计划列表 */
    getList() {
      this.loading = true;
      listRecruitPlan(this.queryParams).then(response => {
        this.recruitPlanList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 查询项目组信息
    handleGetProjectGroups() {
      selectedProjectJob(1).then(res => {
        this.projectGroupOptions = res.data;
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        recruitPlanId: null,
        projectId: null,
        projectGroupId: null,
        recruitLeadingId: null,
        startTime: null,
        endTime: null,
        recruitPlanStatus: null,
        recruitPlanNumber: null,
        recruitPlanDesc: null,
        groupsId: []
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "招聘计划";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const recruitPlanId = row.recruitPlanId || this.ids
      getRecruitPlan(recruitPlanId).then(response => {
        this.form = response.data;
        this.form.daterange = [this.form.startTime, this.form.endTime];
        this.form.groupsId = [this.form.projectRegion, this.form.projectId]
        this.open = true;
        this.title = "招聘计划";
      });
    },
    // 查看到岗人员
    handleViewJobStaff(row) {
      this.reset();
      getRecruitPlan(row.recruitPlanId).then(response => {
        this.form = response.data;
        this.jobOpen = true;
      });
    },
    /** 提交按钮 */
    submitForm() {

      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.startTime = this.form.daterange[0];
          this.form.endTime = this.form.daterange[1];
          // 取出项目Id 小组id
          this.form.projectId = this.form.groupsId[1];
          // this.form.projectGroupId = this.form.groupsId[2];
          if(Date.parse(this.form.endTime) < new Date()){
            this.$message.error('招牌结束时间不能小于当前时间！');
            return;
          }
          if (this.form.recruitPlanId != null) {
            updateRecruitPlan(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addRecruitPlan(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    // 招聘小组选择
    handleCascaderChange(){
      this.form.projectId = this.form.groupsId[1];
    },
    handleSelectedStaff(data) {
      this.form.recruitLeadingId = data.staffId;
      this.form.recruitLeadingName = data.staffName;
      this.isStaffOpen = false;
    },
    // 选择员工
    handleAddStaff(row) {
      this.isStaffOpen = true;
    },
  }
};
</script>
<style scoped>
.el-range-editor.el-input__inner {
  width: 100%;
}
</style>
